<ion-header>
  <ion-navbar>
    <ion-title>课程标题</ion-title>
    <ion-buttons end>
      <button icon-only ion-button (click)="showMoreActionModal()">
        <ion-icon md="ios-more" ios="ios-more"></ion-icon>
      </button>
    </ion-buttons>
  </ion-navbar>
</ion-header>

<ion-content>
  <div>
    <div class="video-wrap">
        <div class="videogular-container">
          <vg-player>
            <vg-overlay-play></vg-overlay-play>
            <vg-buffering></vg-buffering>
        
            <vg-controls>
              <vg-play-pause></vg-play-pause>
              <vg-time-display vgProperty="current" vgFormat="mm:ss"></vg-time-display>
              <vg-scrub-bar style="pointer-events: none;"></vg-scrub-bar>
              <vg-time-display vgProperty="total" vgFormat="mm:ss"></vg-time-display>

              <vg-fullscreen></vg-fullscreen>
            </vg-controls>
        
            <vg-scrub-bar [vgSlider]="true">
              <vg-scrub-bar-current-time [vgSlider]="true"></vg-scrub-bar-current-time>
              <vg-scrub-bar-buffering-time></vg-scrub-bar-buffering-time>
            </vg-scrub-bar>
        
            <video [vgMedia]="media" #media id="singleVideo" preload="auto" crossorigin [poster]="'http://i4.bvimg.com/508365/e516a24e04d56b8bt.jpg'" webkit-playsinline="webkit-playsinline">
              <source src="http://static.videogular.com/assets/videos/videogular.mp4" type="video/mp4">
              <source src="http://static.videogular.com/assets/videos/videogular.ogg" type="video/ogg">
              <source src="http://static.videogular.com/assets/videos/videogular.webm" type="video/webm">
              <!-- <track kind="subtitles" label="English" src="http://static.videogular.com/assets/subs/pale-blue-dot.vtt" srclang="en" default> -->
              <!-- <track kind="subtitles" label="Español" src="http://static.videogular.com/assets/subs/pale-blue-dot-es.vtt" srclang="es"> -->
            </video>
          </vg-player>
        </div>
      <!-- <img src="https://s1.ax1x.com/2018/01/27/pOyFQs.png" alt=""> -->
      <!-- <video src=""></video> -->
    </div>
    <div class="lesson-tabbar">
      <div class="tabbar-item" [ngClass]="{'active':tabType=='intro'}" (click)="tabLessonAbout('intro')">介绍</div>
      <div class="tabbar-item" [ngClass]="{'active':tabType=='menu'}" (click)="tabLessonAbout('menu')">目录</div>
      <div class="tabbar-item" [ngClass]="{'active':tabType=='ppt'}" (click)="tabLessonAbout('ppt')">PPT</div>
    </div>
    <div class="lesson-about">
      <div class="about-item about-intro" [ngClass]="{'active':tabType=='intro'}">
        <div class="intro-main">
          <div class="about-block">
            <div class="about-title">课程介绍</div>
            <div class="about-content">
              本次 Live 我将带来对学习算法和数据结构的体会和理解。无论在知乎还是在生活中，都有不少同学来问我是否有必要针对算法和数据结构做专门的训练，以及具体的训练方法和在未来职场和机器学习方向上的作用，我将在此 Live 中一次性进行解读。
            </div>
          </div>
          <div class="about-block">
            <div class="about-title">课程背景</div>
            <div class="about-content">
              本次 Live 我将带来对学习算法和数据结构的体会和理解。无论在知乎还是在生活中，都有不少同学来问我是否有必要针对算法和数据结构做专门的训练，以及具体的训练方法和在未来职场和机器学习方向上的作用，我将在此 Live 中一次性进行解读。
            </div>
          </div>
          <div class="about-block">
            <div class="about-title">课程收获</div>
            <div class="about-content">
              本次 Live 我将带来对学习算法和数据结构的体会和理解。无论在知乎还是在生活中，都有不少同学来问我是否有必要针对算法和数据结构做专门的训练，以及具体的训练方法和在未来职场和机器学习方向上的作用，我将在此 Live 中一次性进行解读。
            </div>
          </div>
        </div>
        <div class="intro-comment">
          <div class="about-title">课程评论</div>
          <ul class="comment-list">
            <li class="comment-item" *ngFor="let commentItem of comments">
              <study-comment [commentInfo]="commentItem"></study-comment>
              <!-- <div class="comment-container">
                <div class="comment-avatar">
                  <img [src]="commentItem.avatar" alt="">
                </div>
                <div class="comment-main">
                  <div class="comment-username">{{commentItem.name}}</div>
                  <div class="comment-time">{{commentItem.time}}</div>
                  <div class="comment-content">
                    {{commentItem.content}}
                  </div>
                </div>
              </div>
              <div class="comment-action-bar">
                <div class="action-left">
                  <div class="action-item action-parise">
                    <span class="action-icon">
                      <ion-icon ios="md-heart" md="md-heart"></ion-icon>
                    </span>
                    <i class="action-number">890</i>
                  </div>
                  <div class="action-item action-comment-count">
                    <span class="action-icon">
                      <ion-icon ios="md-heart" md="md-heart"></ion-icon>
                    </span>
                    <i class="action-number">890</i>
                  </div>
                  <div class="action-item action-parise">
                    <span class="action-icon">
                      <ion-icon ios="md-heart" md="md-heart"></ion-icon>
                    </span>
                  </div>
                </div>
                <div class="action-right">
                  <div class="action-item action-parise">
                    <span class="action-icon">
                      <ion-icon ios="md-heart" md="md-heart"></ion-icon>
                    </span>
                  </div>
                </div>
              </div> -->
            </li>
          </ul>
        </div>
        <div class="comment-more-link" (click)="goMoreComments()">
          <span>查看全部评论</span>
          <ion-icon ios="ios-arrow-forward" md="ios-arrow-forward"></ion-icon>
        </div>
      </div>
      <div class="about-item about-menu" [ngClass]="{'active':tabType=='menu'}">
        <ul class="menu-list">
          <li class="menu-item" *ngFor="let menuItem of curriculumChapter">
            <div class="menu-no">
              <div>第{{menuItem.no}}节</div>
              <img src="./assets/imgs/img/paiming.png" alt="">
            </div>
            <div class="menu-main">
              <h4>{{menuItem.VideoDes}}</h4>
              <div class="lesson-about">
                <span>点播:{{menuItem.play_num}}</span>
                <span>时长:{{menuItem.time}}</span>
                <span class="study-progress" *ngIf="menuItem.progress!=0">已学{{menuItem.progress}}%</span>
              </div>
            </div>
            <div class="menu-action">
              <button *ngIf="menuItem.price==0||menuItem.is_buy">
                <img src="./assets/imgs/study/play-light.png" alt="">
              </button>
              <button class="buy-btn" *ngIf="menuItem.price!=0&&!menuItem.is_buy">¥1.00</button>
            </div>
          </li>
        </ul>
      </div>
      <div class="about-item about-ppt" [ngClass]="{'active':tabType=='ppt'}">
        <ul class="ppt-list">
          <li class="ppt-item" *ngFor="let pptItem of ppts">
            <img [src]="pptItem" alt="">
          </li>
        </ul>
      </div>
    </div>
  </div>
</ion-content>
<ion-footer class="comment-footer">
  <ion-toolbar>
    <div class="comment-toolbar-container">
      <div class="input-area">
        <ion-input type="input" [(ngModel)]="commentContent" placeholder="期待你的神评论"></ion-input>
      </div>
      <div class="toolbar-actions">
        <div class="toolbar-action-item" (click)="commentStudy()">
          <img src="./assets/imgs/study/comment.svg" alt="">
          <p>评论</p>
        </div>
        <div class="toolbar-action-item">
          <img src="./assets/imgs/study/like.svg" alt="">
          <p>收藏</p>
        </div>
        <div class="toolbar-action-item">
          <img src="./assets/imgs/study/play-dark.svg" alt="">
          <p>试看</p>
        </div>
      </div>
    </div>
  </ion-toolbar>
</ion-footer>

<!-- 分享 -->
<ion-footer class="more-action-footer" *ngIf="showMoreActionFlag">
  <ion-toolbar>
    <social-share (onCancel)="hideMoreActionModal()"></social-share>
  </ion-toolbar>
</ion-footer>
<ion-backdrop [hidden]="!showMoreActionFlag" (click)="hideMoreActionModal()" class="study-detail-backdrop" disable-activated=""
  role="presentation" tappable="" style="opacity: 0.2;"></ion-backdrop>